<template>
	<view class="rate-container">
		<view class="service-info card">
			<view class="product-name">{{ serviceDetail.product_name }}</view>
			<view class="delivery-info">
				<text>送达时间: {{ formatDate(serviceDetail.actual_delivery_time) }}</text>
			</view>
		</view>
		
		<view class="rating-section card">
			<view class="section-title">服务评分</view>
			<view class="rating-stars">
				<view 
					v-for="i in 5" 
					:key="i" 
					class="star-item"
					@click="selectRating(i)"
				>
					<text 
						class="star iconfont icon-star" 
						:class="{ 'active': i <= rating }"
					></text>
				</view>
			</view>
			<view class="rating-text">{{ getRatingText() }}</view>
		</view>
		
		<view class="review-section card">
			<view class="section-title">评价内容</view>
			<view class="textarea-wrapper">
				<textarea 
					v-model="reviewContent" 
					placeholder="请输入您对本次送水服务的评价..." 
					class="review-textarea"
					maxlength="200"
				></textarea>
				<view class="word-count">{{ reviewContent.length }}/200</view>
			</view>
		</view>
		
		<view class="submit-section">
			<button class="submit-btn" @click="submitRating" :disabled="!rating">提交评价</button>
		</view>
	</view>
</template>

<script>
	import { getWaterDeliveryDetail, rateWaterDelivery } from '@/api/services.js'
	
	export default {
		data() {
			return {
				serviceId: null,
				serviceDetail: {},
				rating: 0,
				reviewContent: '',
				loading: true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.serviceId = options.id
				this.getServiceDetail()
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		methods: {
			// 获取服务详情
			async getServiceDetail() {
				this.loading = true
				try {
					const res = await getWaterDeliveryDetail(this.serviceId)
					this.serviceDetail = res
					
					// 检查服务状态是否为已送达
					if (this.serviceDetail.status !== '已送达') {
						uni.showToast({
							title: '当前状态不可评价',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				} catch (error) {
					uni.showToast({
						title: '获取详情失败',
						icon: 'none'
					})
					console.error('获取送水服务详情失败', error)
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} finally {
					this.loading = false
				}
			},
			
			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return ''
				const date = new Date(dateString)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
			},
			
			// 选择评分
			selectRating(value) {
				this.rating = value
			},
			
			// 获取评分对应的文字描述
			getRatingText() {
				switch (this.rating) {
					case 1:
						return '非常差'
					case 2:
						return '差'
					case 3:
						return '一般'
					case 4:
						return '好'
					case 5:
						return '非常好'
					default:
						return '请选择评分'
				}
			},
			
			// 提交评价
			async submitRating() {
				if (!this.rating) {
					uni.showToast({
						title: '请选择评分',
						icon: 'none'
					})
					return
				}
				
				try {
					uni.showLoading({
						title: '提交中...'
					})
					
					const data = {
						rating: this.rating,
						review_content: this.reviewContent.trim()
					}
					
					await rateWaterDelivery(this.serviceId, data)
					
					uni.hideLoading()
					uni.showToast({
						title: '评价成功',
						icon: 'success'
					})
					
					// 返回详情页
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
					
				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: '评价失败，请重试',
						icon: 'none'
					})
					console.error('提交评价失败', error)
				}
			}
		}
	}
</script>

<style lang="scss">
	.rate-container {
		padding: 20rpx;
		background-color: #F8F8F8;
		min-height: 100vh;
		
		.service-info {
			margin-bottom: 20rpx;
			padding: 30rpx;
			
			.product-name {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 15rpx;
			}
			
			.delivery-info {
				font-size: 26rpx;
				color: #666;
			}
		}
		
		.rating-section {
			margin-bottom: 20rpx;
			padding: 30rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			
			.rating-stars {
				display: flex;
				justify-content: center;
				margin-bottom: 20rpx;
				
				.star-item {
					padding: 0 20rpx;
					
					.star {
						font-size: 60rpx;
						color: #ddd;
						
						&.active {
							color: #ffcc00;
						}
					}
				}
			}
			
			.rating-text {
				text-align: center;
				font-size: 28rpx;
				color: #333;
				margin-top: 10rpx;
			}
		}
		
		.review-section {
			margin-bottom: 20rpx;
			padding: 30rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			
			.textarea-wrapper {
				position: relative;
				
				.review-textarea {
					width: 100%;
					height: 240rpx;
					font-size: 28rpx;
					padding: 20rpx;
					background-color: #f5f5f5;
					border-radius: 8rpx;
				}
				
				.word-count {
					position: absolute;
					bottom: 10rpx;
					right: 20rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		
		.submit-section {
			margin-top: 40rpx;
			padding: 0 40rpx;
			
			.submit-btn {
				background-color: #2979ff;
				color: #fff;
				border-radius: 45rpx;
				font-size: 32rpx;
				height: 90rpx;
				line-height: 90rpx;
				
				&[disabled] {
					background-color: #cccccc;
					color: #ffffff;
				}
			}
		}
	}
</style> 